<template>
  <div class="todoapp">
    
    <todo-header @good='good'/>
    <todo-main :list='list' @delet='delet'/>
    <todo-footer :list="list"/>
  </div>
</template>

<script>

import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
     TodoFooter, 
     TodoHeader,
     TodoMain
     },
     data() {
      return {
        list:[
          {id:100,name:'吃饭',isDone:true},
          {id:201,name:'睡觉',isDone:false},
          {id:102,name:'打球',isDone:true},
        ]
      }
     },
     methods:{
      good(goods){
        //每次id都用最后一条数据的id加1
        const init = this.list[this.list.length-1]
        const id =init ? init.id + 1 : 99
        this.list.push({
          id,
          name:goods,
          isDone:false
        })
      },
      delet(index){
        this.list.splice(index,1)
      }
     }

}
</script>

<style>

</style>